<template>
  <div class="xiao">
    <div class="xiao-header">
      <div @click="handleNO">
        <span class="icon iconfont icon-zuo"></span>
      </div>
      <div>消息列表</div>
      <!-- <div class="geng">
        <span class="icon iconfont">&#xe639;</span>
        <span class="icon iconfont">&#xe60f;</span>
      </div> -->
      <span></span>
    </div>
    <div class="xiao-main">
      <div class="xiao-umn">
        <span class="active">消息</span>
        <span @click="handleGao">公告</span>
      </div>
      <!-- <ul
        v-for="(item, index) in message"
        :key="index"
        :class="curIndex === index ? 'active' : ''"
        @click="curIndex = index"
      >
        <li>{{ item }}</li>
      </ul> -->
      <div class="xiao-footer">
        <van-swipe-cell v-for="(v, i) in list" :key="v.index">
          <van-cell class="tt" :border="false" value="内容">
            <div>
              <dl>
                <ul class="lin">
                  <img :src="v.img" alt="" />
                </ul>
                <ol>
                  <p>
                    <span>安静</span><span> {{ v.timedata }}{{ v.times }}</span>
                  </p>
                  <p>{{ v.title }}</p>
                </ol>
              </dl>
            </div>
          </van-cell>
          <template #right>
            <van-button
              square
              type="danger"
              class="delete-button"
              text="删除"
              @click="handleDel(v.id)"
            />
            <van-button
              square
              type="primary"
              class="zd-button"
              text="置顶"
              @click="handleEit(i)"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      name: "Xiao",
      list: "",
      message: ["消息", "公告"],
      curIndex: 0,
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    handleNO() {
      this.$router.push("/index");
    },
    handleGao() {
      this.$router.push("/gao");
    },
    getlist() {
      axios.get("/xiaoxi").then((res) => {
        this.list = res.data.data;
        console.log(this.list);
      });
    },
    handleDel(v) {
      axios.delete(`/xiaoxidel/${v}`).then((res) => {
        console.log(res, "11111");
      });
      this.getlist();
    },
    handleEit(i) {
      // axios.delete(`/xiaoxidel/${v.id}`);
      // this.arr=this.list.find(v=>v.id===id);
      // this.list.splice(index,1)
      // console.log(this.arr);
      //  console.log(this.arr[0],"1111");
      //   this.list.unshift(this.arr)
      //  new Set(this.arr)

      let arr = this.list.splice(i, 1);
      console.log(arr);
      this.list.unshift(arr[0]);
    },
  },
};
</script>
<style scoped>

.xiao {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.xiao-main {
  flex: 1;
  overflow-y: scroll;
}
.tt dl {
  display: flex;
  /* justify-content: space-between; */
}
.tt dl ol {
  margin-left: 10px;
}
.tt dl ol p {
  display: flex;
  justify-content: space-between;
}
.tt img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.tt {
  width: 100%;
  border-bottom: 10px solid rgb(243, 243, 243);
}

.xiao-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  height: 50px;
  font-size: 20px;
  background: rgb(6, 121, 230);
  align-items: center;
  color: #fff;
  position: sticky;
  z-index: 999;
}
.xiao-header .iconfont {
  font-size: 20px;
}
.geng {
  border: 1px solid #ccc;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
}
.geng span {
  padding: 3px 5px;
}
.xiao-umn {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}
.active {
  color: rgb(6, 121, 230);
}
.delete-button {
  height: 100%;
}
.zd-button {
  background: rgb(6, 121, 230);
  border: none;
  height: 100%;
}
.danger {
  height: 100px;
}
</style>